<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script src="color.js"></script>

</head>
<body>
<script type="text/javascript" src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>

<!-- 1、为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 1200px;height:600px;"></div>

<script type="text/javascript">
    // 2、基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('main'));
    // 初始化一些变量
    const years = [];
    for (let i = 0; i < defaultData.length; ++i) {
        if (!years.includes(defaultData[i][3])) {
            years.push(defaultData[i][3]);
        }
    }

    let startYear = years[0]

    // 获取各国国旗emoji
    // const emojis = {}
    // $.getJSON('https://fastly.jsdelivr.net/npm/emoji-flags@1.3.0/data.json', function (data) {
    //      for(let i=0; i<data.length; ++i) {
    //          emojis[data[i]['name']] = data[i]['emoji']
    //      }
    // })

    // 3、指定图表的配置项和数据
    let option = {
        // 标题配置
        title: {
            text: '1960年~2023年世界GDP排行（Top10）',
            textStyle: {
                color: 'black',
                fontSize: 30,
                fontFamily: '微软雅黑' // '华文彩云'
            },
            left: 'center',
            top: 30
        },
        // 网格（整个图表区域）配置
        grid: {
            top: 80,
            right: 180
        },
        xAxis: {
            max: 'dataMax',
            //show: false
            name: '亿美元',
        },
        yAxis: {
            axisTick: { show: false }, // 去掉刻度
            axisLine: { show: false }, // 去掉轴线
            type: 'category',
            inverse: true, // 反向坐标轴
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 9, // 这里的 9 表示只显示Top 10个国家
            axisLabel: {
                textStyle: {
                    //color: 'black',      // 字体颜色
                    fontSize: 15,      // 字体大小
                    fontFamily: 'Arial' // 字体类型
                }
            }
        },
        series: [
            {
                realtimeSort: true, // 对数据进行排序
                name: 'X',
                type: 'bar',
                itemStyle: {
                    color: function (param) {
                        return countryColors[param.value[1]] || '#5470c6';
                    }
                },
                data: defaultData.filter(function (d) {
                    return d[3] === startYear;
                }),
                encode: {
                    x: 2, // 这里的4表示使用第3列的数据，即GDP，单位亿
                    y: 0 // 这里的0表示使用第1列的数据，即中文国家名
                },
                label: {
                    show: true,
                    position: 'right',
                    valueAnimation: true, // 柱子右侧的数字动态变化
                    formatter: function (param) {
                        // 自定义每个柱子的标签（原来柱子后面只有GDP那个数字）
                        // {img|} 是定义一个叫做 img 的样式名称，当然你可以换成其他的
                        // param.value 仍然是当前国家的数据，下标4表示GDP
                        // 这里整体的意思是，显示一个图片，图片后面放GDP那个数字
                        return flagEmoji[param.value[0]] + param.value[2]
                    },
                    textStyle: {
                        //color: 'black',      // 字体颜色
                        fontSize: 15,      // 字体大小
                        fontFamily: 'Arial' // 字体类型
                    }
                }
            }
        ],
        animationDuration: 1000,
        animationDurationUpdate: 1000,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear',
        // 显示年份图片
        graphic: {
            elements: [
                {
                    type: 'text',
                    right: 160,
                    bottom: 60,
                    style: {
                        text: startYear,
                        font: 'bolder 80px monospace',
                        fill: 'rgba(100, 100, 100, 0.25)'
                    },
                    z: 100
                }
            ]
        }
    };

    // 让数据动起来：只要间隔一段时间，修改series中的数据即可
    myChart.setOption(option);
    for (let i = 0; i < years.length-1; ++i) {
        (function (i) {
            setTimeout(function () {
                updateYear(years[i + 1]);
            }, i * 1000);
        })(i);
    }

    // 更新series中的源数据data
    function updateYear(year) {
        let source_data = defaultData.slice(1).filter(function (d) {
            return d[3] === year;
        });
        option.series[0].data = source_data;
        option.graphic.elements[0].style.text = year;
        myChart.setOption(option);   // 4、使用刚指定的配置项和数据显示图表。
    }

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>